<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>活动优惠券列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 搜索 添加 -->
        <el-form :inline="true" style="margin-top: 20px;">
            <el-form-item>
                <el-input size="small" v-model="namer" placeholder="输入优惠券名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-select size="small" v-model="statusr" placeholder="请选择优惠券状态">
                    <el-option v-for="item in options" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="chongzhi">重置</el-button>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-plus" @click="openFulls()">添加</el-button>
            </el-form-item>
        </el-form>


        <!-- 列表 -->
        <el-table size="small" :data="fullData" element-loading-text="拼命加载中" style="width: 100%;" v-horizontal-scroll>
            <el-table-column align="center" sortable type="index" label="序号"></el-table-column>
            <el-table-column align="center" sortable prop="name" label="名称" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="doorsill" label="门槛金额" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="deductMoney" label="扣除金额" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="duration" label="截止日期" width="150">
                <template slot-scope="scope">
                    <div>{{ transformDate(scope.row.duration) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" sortable prop="status" :formatter="Status" label="状态"
                width="120"></el-table-column>
            <el-table-column align="center" sortable prop="sendNum" label="当前领取数量" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="num" label="总数" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="useCount" label="使用数量" width="120"></el-table-column>
            <el-table-column align="center" sortable prop="description" label="使用规则" width="200"></el-table-column>
            <el-table-column align="center" sortable prop="createTime" label="创建时间" width="150">
                <template slot-scope="scope">
                    <div>{{ transformDate(scope.row.createTime) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="350" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="upFullCount(scope.row)">修改优惠券库存</el-button>
                    <el-button size="mini" type="primary" @click="openFulls(scope.row)">修改优惠券信息</el-button>
                    <el-button size="mini" type="danger" @click="deleFulls(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 修改库存 -->
        <el-dialog title="修改库存界面" :visible.sync="editFormUpCount" width="20%">
            <el-radio v-model="radio" label="1">增加库存</el-radio>
            <el-radio v-model="radio" label="0">减少库存</el-radio>
            <div style="display: flex;margin-top: 20px;margin-left: 20px; align-items: center;">
                <span>数&nbsp;&nbsp;量&nbsp;:&nbsp;</span><el-input style="width: 70%;" v-model="count"
                    placeholder="请输入数量"></el-input>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click='closeUpCount()'>取消</el-button>
                <el-button size="small" type="primary" :loading="loading" @click="upCount()"
                    v-if="radio == '1'">增加</el-button>
                <el-button size="small" type="danger" :loading="loading" @click="upCount()"
                    v-if="radio == '0'">减少</el-button>
            </div>
        </el-dialog>

        <!-- 编辑界面 -->
        <el-dialog :title="tit" :visible.sync="editFormVisiible" width="50%">
            <el-form label-width="90px">
                <el-form-item label="名称" prop="name">
                    <el-input size="small" v-model="name" auto-complete="off" placeholder="请输入名称"></el-input>
                </el-form-item>
                <el-form-item label="门槛金额" prop="doorsill">
                    <el-input size="small" v-model="doorsill" auto-complete="off" placeholder="请输入门槛金额"></el-input>
                </el-form-item>
                <el-form-item label="扣除金额" prop="deductMoney">
                    <el-input size="small" v-model="deductMoney" auto-complete="off" placeholder="请输入扣除金额"></el-input>
                </el-form-item>
                <el-form-item label="上架时间" prop="startTime">
                    <el-date-picker v-model="startTime" size="small" type="datetime" placeholder="选择上架时间" align="right"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="截止日期" prop="duration">
                    <el-date-picker v-model="duration" size="small" type="datetime" placeholder="选择截止时间" align="right"
                        :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="status" placeholder="请选择优惠券状态" size="small">
                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="当前领取数量" prop="sendNum" style="margin-top: -14px;">
                    <el-input size="small" v-model="sendNum" auto-complete="off" placeholder="请输入当前领取数量"></el-input>
                </el-form-item> -->
                <el-form-item label="总数" prop="num">
                    <div>
                        <el-input size="small" v-model="num" auto-complete="off" placeholder="请输入优惠券总数"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="使用规则" prop="description">
                    <div>
                        <el-input size="small" v-model="description" auto-complete="off"
                            placeholder="请输入优惠券使用规则"></el-input>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click='closeDialog()'>取消</el-button>
                <el-button size="small" type="primary" :loading="loading" @click="addFulls()"
                    v-if="tit == '添加'">添加</el-button>
                <el-button size="small" type="primary" :loading="loading" @click="upFulls()"
                    v-if="tit == '修改'">修改</el-button>
            </div>
        </el-dialog>
        <!-- 分页组件 -->
        <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    </div>
</template>

<script>
import {
    getCouponsList,
    addCoupons,
    upCoupons,
    deleteCoupons,
    alterCouponsCount
} from "../../api/userMG";
import Pagination from '../../components/Pagination'
export default {
    data() {
        return {
            fullData: [],
            loading: false,
            name: '',
            status: -1,
            editFormUpCount: false,
            radio: '1',
            count: '',
            tit: '添加',
            name: '',
            doorsill: '',
            deductMoney: '',
            startTime: '',
            duration: '',
            status: '',
            sendNum: '',
            num: '',
            description: '',
            useCount: '',
            createTime: '',
            options: [{
                value: 0,
                label: '进行中'
            }, {
                value: 1,
                label: '禁用'
            }, {
                value: 2,
                label: '已失效'
            }],
            editFormVisiible: false,
            pickerOptions: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                    }
                }]
            },
            namer: '',
            statusr: '',
            // 分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 20,
                total: 10
            },
        }
    },
    created() {
        this.getdata(1);
    },
    // 注册组件
    components: {
        Pagination
    },
    methods: {
        // 修改
        upFulls() {
            this.loading = true
            upCoupons({
                kind: 2,
                id: this.id,
                name: this.name,
                doorsill: this.doorsill,
                deductMoney: this.deductMoney,
                startTime: Math.floor(new Date(this.startTime).getTime() / 1000),
                duration: Math.floor(new Date(this.duration).getTime() / 1000),
                status: this.status,
                sendNum: this.sendNum,
                num: this.num,
                description: this.description,
                createTime: this.createTime,
            }).then((res) => {
                this.loading = false;
                if (res.code == 200) {
                    this.editFormVisiible = false
                    this.$message.success(res.msg)
                    this.getdata(this.pageparm.currentPage)
                } else {
                    this.editFormVisiible = false
                    this.$message.error(res.msg);
                }
            })
        },
        // 添加
        addFulls() {
            this.loading = true,
                addCoupons({
                    kind: 2,
                    name: this.name,
                    doorsill: this.doorsill,
                    deductMoney: this.deductMoney,
                    startTime: Math.floor(new Date(this.startTime).getTime() / 1000),
                    duration: Math.floor(new Date(this.duration).getTime() / 1000),
                    status: this.status,
                    sendNum: this.sendNum,
                    num: this.num,
                    description: this.description,
                    createTime: '',
                }).then((res) => {
                    this.loading = false;
                    if (res.code == 200) {
                        this.editFormVisiible = false
                        this.$message.success(res.msg)
                        this.getdata(1)
                    } else {
                        this.editFormVisiible = false
                        this.$message.error(res.msg);
                    }
                })
        },
        // 关闭编辑对话框
        closeDialog() {
            this.editFormVisiible = false
            this.$message({
                type: 'info',
                message: '已取消编辑'
            })
        },
        // 打开编辑器
        openFulls(row) {
            var userdata = JSON.parse(localStorage.getItem("userdata"))
            this.$prompt('请输入密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(?!(\s+$))/,
                inputErrorMessage: '不可以空数据提交!'
            }).then(({ value }) => {
                if (value === userdata.menuTwo) {
                    this.editFormVisiible = true;
                    if (row != undefined && row != "undefined") {
                        this.tit = "修改";
                        this.id = row.id;
                        this.name = row.name;
                        this.doorsill = row.doorsill;
                        this.deductMoney = row.deductMoney;
                        this.startTime = new Date(row.startTime * 1000);
                        this.duration = new Date(row.duration * 1000);
                        this.status = row.status;
                        this.sendNum = row.sendNum;
                        this.num = row.num;
                        this.useCount = row.useCount;
                        this.description = row.description;
                        this.createTime = row.createTime;
                    } else {
                        this.tit = "添加";
                        this.name = '';
                        this.doorsill = '';
                        this.deductMoney = '';
                        this.startTime = '';
                        this.duration = '';
                        this.status = '';
                        this.sendNum = ''
                        this.num = '';
                        this.useCount = '';
                        this.description = ''
                    }
                } else {
                    this.$message({
                        type: 'error',
                        message: '密码错误'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        // 重置数据
        chongzhi() {
            this.namer = ''
            this.statusr = ''
            this.getdata(1)
        },
        // 搜索数据
        search() {
            this.getdata(1);
        },
        // 删除
        deleFulls(row) {
            var userdata = JSON.parse(localStorage.getItem("userdata"))
            this.$prompt('请输入密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(?!(\s+$))/,
                inputErrorMessage: '不可以空数据提交!'
            }).then(({ value }) => {
                if (value === userdata.menuTwo) {
                    this.$confirm('确定删除吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'error'
                    }).then(() => {
                        let data = {
                            id: row.id
                        }
                        deleteCoupons(data).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                this.getdata(this.pageparm.currentPage)
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                } else {
                    this.$message({
                        type: 'error',
                        message: '密码错误'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        // 打开修改库存编辑页
        upFullCount(row) {
            var userdata = JSON.parse(localStorage.getItem("userdata"))
            this.$prompt('请输入密码', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(?!(\s+$))/,
                inputErrorMessage: '不可以空数据提交!'
            }).then(({ value }) => {
                if (value === userdata.menuTwo) {
                    this.editFormUpCount = true;
                    this.id = row.id;
                } else {
                    this.$message({
                        type: 'error',
                        message: '密码错误'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },
        upCount() {
            let data = {
                id: this.id,
                type: this.radio,
                count: this.count
            }
            alterCouponsCount(data).then((res) => {
                if (res.code == 200) {
                    this.editFormUpCount = false
                    this.$message.success(res.msg)
                    this.getdata(this.pageparm.currentPage)
                    this.count = ''
                } else {
                    this.editFormUpCount = false
                    this.$message.error(res.msg);
                }
            })
        },
        // 关闭修改对话框
        closeUpCount() {
            this.editFormUpCount = false
            this.$message({
                type: 'info',
                message: '已取消修改'
            })
        },
        Status: function (row) {
            if (row.status == 0) {
                return "进行中"
            } else if (row.status == 1) {
                return "禁用"
            } else if (row.status == 2) {
                return "已失效"
            }
        },
        // 分页插件事件
        callFather(parm) {
            this.pageparm.page = parm.currentPage
            this.getdata(parm.currentPage)
        },
        // 获取数据
        getdata(page) {
            this.loading = true;
            var parameter = {
                page: (page - 1) * 20,
                name: this.namer,
                status: this.statusr,
                kind: 2
            };
            getCouponsList(parameter).then((res) => {
                this.loading = false;
                if (res.code != 200) {
                    this.$Message({
                        type: "info",
                        message: res.msg,
                    });
                } else {
                    this.fullData = res.data.list;
                    this.pageparm.currentPage = page;
                    this.pageparm.total = res.data.count;
                    return;
                }
            })
        },
    }
}
</script>

<style></style>